<template>
  <!-- 每个模版页必须有一个根节点标签 -->
  <div>
    <!-- 这里就是组件页面显示的内容 -->
    <canvas :id="'QRCode_' + qrId" class="qrcode-canvas"></canvas>
    <!-- <div>子组件：{{ qrUrl }}</div> -->
  </div>
</template>

<script>
//引入外部组件
import QRCode from "qrcode";

export default {
  name: "Qrcode", //定义组件的名称
  props: {
    //新建对外暴露的属性用于，从父组件传值过来
    qrUrlStr: String,
    qrId: {
      // 唯一标识符属性
      type: String,
      default: () => Math.random().toString(36).substr(2, 9) // 默认生成随机ID
    },
    width: {
      type: Number,
      default: 250
    },
    height: {
      type: Number,
      default: 250
    }
  },
  data() {
    return {
      qrUrl: this.qrUrlStr // 初始化数据
    };
  },
  watch: {
    //监控父组件传递子组件值的变化，如果变化则更新
    qrUrlStr: {
      handler(newValue) {
        //console.log("更新"+newValue);
        this.qrUrl = newValue; //更新数据
        this.getQRCode(); //生成二维码
      },
      deep: true, //深度监控
      immediate: true // 立即执行一次
    }
  },
  mounted() {
    this.getQRCode();
  },
  methods: {
    //设置带参数传递，从父组件往子组件传递地址，让该二维码生成组件可以复用
    getQRCode() {
      if (!this.qrUrl) {
        console.warn("QRCode: qrUrl is empty");
        return;
      }
      
      //生成的二维码为URL地址js
      let opts = {
        errorCorrectionLevel: "H", //容错级别
        type: "image/png", //生成的二维码类型
        quality: 0.3, //二维码质量
        margin: 1, //二维码留白边距
        width: this.width,
        height: this.height,
        color: {
          dark: "#333333", //前景色
          light: "#fff", //背景色
        },
      };

      // 使用动态ID
      let msg = document.getElementById("QRCode_" + this.qrId);
      if (!msg) {
        console.error("Canvas element not found for ID: QRCode_" + this.qrId);
        return;
      }
      
      // 使用箭头函数保持 this 上下文，或者保存 this 引用
      const self = this;
      QRCode.toCanvas(msg, this.qrUrl, opts, function (error) {
        if (error) {
          console.log("二维码加载失败", error);
          // 使用全局的 ElMessage 或者不显示消息
          if (self.$message) {
            self.$message.error("二维码加载失败");
          }
        }
      });
    },
  },
};
</script>

<style scoped>
/* 独立组件的样式，写这里，支持标准的css语法 */
.qrcode-canvas {
  display: block;
  margin: 0 auto;
}
</style>